// <!-- 收入支出的echarts -->

function xzzc_top_e(MAX, VALUE) {
    var myChart = echarts.init(document.querySelector(".xzzc_top_e"));
    // myChart.dispatchAction({
    //     type:'showTip',
    //     seriesIndex:1,
    //     dataIndex:new Date().getHours()
    // })


    console.log(myChart, 'myChart')
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y];
            const c1 = [shape.x - 6, shape.y - 6];
            const c2 = [xAxisPoint[0] - 6, xAxisPoint[1] - 6];
            const c3 = [xAxisPoint[0], xAxisPoint[1]];
            ctx
                .moveTo(c0[0], c0[1])
                .lineTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .closePath();
        }
    });
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x, shape.y];
            const c2 = [xAxisPoint[0], xAxisPoint[1]];
            const c3 = [xAxisPoint[0] + 10, xAxisPoint[1] - 6];
            const c4 = [shape.x + 10, shape.y - 6];
            ctx
                .moveTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath();
        }
    });
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x + 10, shape.y - 6];//x上  y右侧
            const c3 = [shape.x + 6, shape.y - 10];
            const c4 = [shape.x - 6, shape.y - 6];
            ctx
                .moveTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath();
        }
    });
    echarts.graphic.registerShape("CubeLeft", CubeLeft);
    echarts.graphic.registerShape("CubeRight", CubeRight);
    echarts.graphic.registerShape("CubeTop", CubeTop);
    // const MAX =   [6000, 6000, 6000, 6000, 6000, 5000];
    // const VALUE = [3012, 1230, 3790, 2349, 1654, 1230];
    var option = {
        tooltip: {
            // trigger: "axis",
            // axisPointer: {
            //   type: "shadow"
            // }
            trigger: "axis",
            axisPointer: {
                type: "shadow"
            },
            // formatter: function (params, ticket, callback) {
            //     const item = params[1];
            //     return item.name + " : " + item.value;
            // }
        },

        // backgroundColor: "#010d3a",
        title: {
            text: "",
            top: 32,
            bottom: 30,
            left: 18,
            textStyle: {
                color: "#fff",
                fontSize: 24
            }
        },
        // legend: {
        //     show: true,
        //     icon: "diamond",
        //     itemHeight: 11,
        //     textStyle: {
        //         color: "#fff",
        //         fontSize: "1.4rem",
        //     }
        // },
        legend: {
            // data: ["去年", "今年"],
            data: [{
                name: '收入',
                show: true,
                x: "center",
                y: "0",//顶部标题距离顶部的距离
                // icon: "circle",//顶部标题旁图标是圆形
                itemWidth: 18,
                icon: 'image:///image/num_xc/qingse_lx.png',

                itemHeight: 19,
                textStyle: {
                    // color: "#1bb4f6",
                    color: '#A5B6D3'

                },
            },
            {
                name: '支出',
                show: true,
                x: "center",
                y: "0",//顶部标题距离顶部的距离
                // icon: "circle",//顶部标题旁图标是圆形
                icon: 'image:///image/num_xc/blue_lx.png',

                itemWidth: 18,
                itemHeight: 19,
                textStyle: {
                    // color: "#1bb4f6",

                    color: '#A5B6D3'

                },
            }],

            show: true,
            x: "center",
            y: "0",//顶部标题距离顶部的距离
            icon: "circle",//顶部标题旁图标是圆形
            itemWidth: 18,
            itemHeight: 19,
            textStyle: {
                color: "#1bb4f6",
            },
        },

        grid: {
            left: "0%",
            top: "20%",
            right: "2%",
            bottom: "4%",
            containLabel: true
        },
        xAxis: {
            type: "category",
            data: [
                "浦东街道",
                "浦西街道",
                "南蒲街道",
                "魏庄街道",
                "恼里镇",
                "丁栾镇"
            ],
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#35456A"
                }
            },

            offset: 10,
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0, //代表显示所有x轴标签显示 
                show: true,
                textStyle: {
                    color: "#fff",
                    fontSize: 11,
                    fontFamily: " Source Han Sans SC"
                }
            }
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: "dashed",
                    color: "#35466E",
                    width: 1
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                fontSize: 12,
                color: "#A5B6D3" // 文本颜色

            },
            boundaryGap: ["10%", "20%"]
        },
        series: [
            {
                name: "收入",
                type: "custom",
                stack: "Ad1",
                renderItem: function (params, api) {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: "group",
                        children: [
                            {
                                type: "CubeLeft",
                                name: "b",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: " rgba(26, 255, 228, 1)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(26, 255, 228, 0.1)"
                                        }
                                    ])
                                }
                            },
                            {
                                type: "CubeRight",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: " rgba(26, 255, 228, 1)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(26, 255, 228, 0.1)"
                                        }
                                    ])
                                }
                            },
                            {
                                type: "CubeTop",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: "#5ADFFF"
                                }
                            }
                        ]
                    };
                },
                data: MAX
            },

            {
                stack: "Ad1",

                type: "custom",
                name: "支出",
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: "group",
                        children: [
                            {
                                type: "CubeLeft",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#0067C7"
                                        },
                                        {
                                            offset: 1,
                                            color: "#0085FF"
                                        }
                                    ])
                                }
                            },
                            {
                                type: "CubeRight",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#0067C7"
                                        },
                                        {
                                            offset: 1,
                                            color: "#0085FF"
                                        }
                                    ])
                                }
                            },
                            {
                                type: "CubeTop",

                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#5ADFFF"
                                        },
                                        {
                                            offset: 1,
                                            color: "#5ADFFF"
                                        }
                                    ])
                                }
                            }
                        ]
                    };
                },
                data: VALUE
            }
        ]
    };
    // 3. 把配置项给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

// <!-- 生态环境监测echarts -->

function shuiq(data) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".shuiq"));

    var option = {
        tooltip: {
            trigger: "axis",
            // 鼠标放上去的刻度线的颜色
            axisPointer: {
                lineStyle: {
                    color: "#dddc6b"
                }
            }
        },
        // legend: {
        //   top: "0%",
        //   textStyle: {
        //     color: "rgba(255,255,255,.5)",
        //     fontSize: "12"
        //   }
        // },
        grid: {
            left: "0%",
            top: "10%",
            right: "3%",
            bottom: "0%",
            containLabel: true
        },

        xAxis: [
            {
                type: "category",
                boundaryGap: false,//x轴数据剧中
                axisLabel: {
                    textStyle: {
                        color: "#fff",
                        // color: "rgba(255,255,255,.6)",
                        fontSize: "1.4rem"
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 1,
                        color: "rgba(255,255,255,.2)"
                    }
                },
                // 网格线
                splitLine: {
                    show: true,
                    lineStyle: {
                        // color: "rgba(255,255,255,.1)"
                        type: "dashed",
                        color: "#35466E",
                        width: 1
                    }
                },
                data: ["01月", "03月", "06月", "09月", "12月"]
            },

            {
                axisPointer: { show: false },
                axisLine: { show: false },
                position: "bottom",
                offset: 20
            }
        ],

        yAxis: [
            {
                type: "value",
                //  去除刻度
                axisTick: { show: true },

                // y轴的刻度线
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1
                    }
                },
                //y轴的字体颜色
                axisLabel: {
                    textStyle: {
                        color: "#A5B6D3",
                        fontSize: "1.4rem"
                    }
                },
                //y轴分格线
                splitLine: {
                    show: true,
                    lineStyle: {
                        // color: "rgba(255,255,255,.1)"
                        type: "dashed",
                        color: "#35466E",
                        width: 1
                    }
                }
            }
        ],
        series: [
            {
                // name: "播放量",
                name: "",
                type: "line",
                smooth: true, //显示曲线
                symbol: "circle",
                symbolSize: 15,
                showSymbol: false, //显示每个折现的点
                // lineStyle: {
                //     normal: {
                //         color: "#1AFFE4",
                //         width: 2
                //     }
                // },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                // {
                                //   offset: 0,
                                //   color: "rgba(1, 132, 213, 0.4)"
                                // },
                                // {
                                //   offset: 0.8,
                                //   // color: "rgba(1, 132, 213, 0.1)"
                                //   color: "#1AFFE4"
                                // }
                                {
                                    offset: 0,
                                    color: "rgba(1, 132, 213, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(1, 132, 213, 0.1)"
                                    //   color: "#1AFFE4"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                // itemStyle: {
                //     normal: {
                //         color: "#0184d5",
                //         borderColor: "rgba(221, 220, 107, .1)",
                //         borderWidth: 12
                //     }
                // },
                symbol: "circle",
                // 拐点大小
                symbolSize: 15,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#1890FF",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                // lineStyle: {
                //     color: {
                //       type: "linear",
                //       x: 0,
                //       y: 1,
                //       x2: 0,
                //       y2: 0,
                //       // 0% 处的颜色                           // 100% 处的颜色
                //       colorStops: [
                //         { offset: 0, color: "#FFA13F" },
                //         { offset: 0.25, color: "#1890FF" },
                //         { offset: 0.75, color: "#CD270C" },
                //         { offset: 1, color: "#34CE72" },
                //       ],
                //       global: false, // 缺省为 false
                //     },
                //     width: 2,
                //   },
                // 开始不显示拐点， 鼠标经过显示
                symbol: "circle",
                // 拐点大小
                symbolSize: 15,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#1890FF",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                data: data
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

}
// 安防应急
function box_right_top_quan(index, length, title, value, once) {
    console.log(length, 'length', index, 'index', title, value, once)
    var myChart = echarts.init(document.querySelector(".box_right_top_quan"));
    var option = {
        grid: {
            left: "0%",
            top: "0%",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        graphic: [
            {
                type: "text",
                left: "center", //定位
                top: "40%", //定位
                style: {
                    text: "13.1%", //这个就是定位的环内信息
                    fill: "#F9D354" //字体颜色
                }
            }, //以下就是多个环内信息根据left和top分别定位排列
            {
                type: "text",
                left: "center",
                top: "48%",
                style: {
                    text: `浦东镇街1`,
                    fill: "#A5B6D3"
                }
            }
        ],

        color: ["#1893FE", "#F9D354", "#19D1EF", "#19D1EF"],
        //   鼠标悬浮弹窗
        tooltip: {
            trigger: "item",
            position: function (point, params, dom, rect, size) {
                //  size为当前窗口大小
                if ((size.viewSize[0] / 2) >= point[0]) {
                    //其中point为当前鼠标的位置
                    return [point[0] + 0, '10%'];
                } else {
                    //其中point为当前鼠标的位置
                    return [point[0], '10%'];
                }
            }

        },
        // 顶部一排显示的参数
        // legend: {
        //   top: "5%",
        //   left: "center"
        // },
        series: [
            {
                name: "",
                type: "pie",
                radius: ["60%", "70%"],
                // radius: ["80%", "90%"],

                avoidLabelOverlap: false,
                itemStyle: {
                    //   borderRadius: 10,
                    borderRadius: 0,
                    borderColor: "#031439",
                    borderWidth: 3
                },
                label: {
                    show: false, //不默认显示
                    position: "center"
                },
                emphasis: {
                    label: {
                        show: false, //悬浮显示内容
                        fontSize: "10",
                        fontWeight: "bold",
                        Color: "#F9D354"
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1100, name: "浦东镇街1" },
                    { value: 735, name: "浦东镇街2" },
                    { value: 580, name: "浦东镇街3" },
                    { value: 484, name: "浦东镇街4" },

                ]
            }
        ]
    };
    // if (once == -1) {
    for (let index = 0; index < length; index++) {
        myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index });

    }

    myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index });
    option.graphic[0].style.text = title;
    option.graphic[1].style.text = value;
    // }


    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

    // if (once != -1) {
    for (let index = 0; index < length; index++) {
        myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index });

    }

    myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index });
    option.graphic[0].style.text = title;
    option.graphic[1].style.text = value;
    // }


}

// 巩固脱贫ggecharts
function ggecharts(MAX, VALUE) {
    var myChart = echarts.init(document.querySelector(".ggecharts"));
    console.log(myChart, 'myChart')
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y];
            const c1 = [shape.x - 6, shape.y - 6];
            const c2 = [xAxisPoint[0] - 6, xAxisPoint[1] - 6];
            const c3 = [xAxisPoint[0], xAxisPoint[1]];
            ctx
                .moveTo(c0[0], c0[1])
                .lineTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .closePath();
        }
    });
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x, shape.y];
            const c2 = [xAxisPoint[0], xAxisPoint[1]];
            const c3 = [xAxisPoint[0] + 10, xAxisPoint[1] - 6];
            const c4 = [shape.x + 10, shape.y - 6];
            ctx
                .moveTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath();
        }
    });
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x + 10, shape.y - 6];//x上  y右侧
            const c3 = [shape.x + 6, shape.y - 10];
            const c4 = [shape.x - 6, shape.y - 6];
            ctx
                .moveTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath();
        }
    });
    echarts.graphic.registerShape("CubeLeft", CubeLeft);
    echarts.graphic.registerShape("CubeRight", CubeRight);
    echarts.graphic.registerShape("CubeTop", CubeTop);

    var option = {
        tooltip: {
            // trigger: "axis",
            // axisPointer: {
            //   type: "shadow"
            // }
            // 不加他鼠标选入不会待柱状背景
            trigger: "axis",
            axisPointer: {
                type: "shadow"
            },
            // formatter: function (params, ticket, callback) {
            //     const item = params[1];
            //     return item.name + " : " + item.value;
            // }
        },

        // backgroundColor: "#010d3a",
        title: {
            text: "",
            top: 32,
            bottom: 30,
            left: 18,
            textStyle: {
                color: "#fff",
                fontSize: 24
            }
        },
        // legend: {
        //     show: true,
        //     icon: "diamond",
        //     itemHeight: 11,
        //     textStyle: {
        //         color: "#fff",
        //         fontSize: "1.4rem",
        //     }
        // },
        grid: {
            left: "0%",
            top: "10%",
            right: "0%",
            bottom: "0%",
            containLabel: true
        },
        xAxis: {
            type: "category",
            data: [
                "浦东街道",
                "浦西街道",
                "南蒲街道",
                "魏庄街道",
                "恼里镇",
                "丁栾镇"
            ],
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#35456A"
                }
            },

            offset: 0,
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0, //代表显示所有x轴标签显示 
                show: true,
                textStyle: {
                    color: "#fff",
                    fontSize: 14,
                    fontFamily: " Source Han Sans SC"
                }
            }
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: "dashed",
                    color: "#35466E",
                    width: 1
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                fontSize: 12,
                color: "#A5B6D3" // 文本颜色

            },
            boundaryGap: ["10%", "20%"]
        },
        series: [

            {
                stack: "Ad1",

                type: "custom",
                name: "支出",
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: "group",
                        children: [
                            {
                                type: "CubeLeft",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#0067C7"
                                        },
                                        {
                                            offset: 1,
                                            color: "#0085FF"
                                        }
                                    ])
                                }
                            },
                            {
                                type: "CubeRight",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#0067C7"
                                        },
                                        {
                                            offset: 1,
                                            color: "#0085FF"
                                        }
                                    ])
                                }
                            },
                            {
                                type: "CubeTop",

                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#5ADFFF"
                                        },
                                        {
                                            offset: 1,
                                            color: "#5ADFFF"
                                        }
                                    ])
                                }
                            }
                        ]
                    };
                },
                data: VALUE
            }
        ]
    };
    // 3. 把配置项给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

// 地图
function maps() {
    var cityCodeArr = ["4100", '4107']; // 河南 新乡

    const allAreaData = []; // 所有区县的统计数据
    // const cityCodeArr = ["5100", "5101"]; // ["5100", "5101"] [省、市]
    console.log('cityCodeArr111', cityCodeArr)
    if (myChart) {
        myChart.dispose(); // 销毁实例，实例销毁后无法再被使用。
    }
    // 初始化图表
    var myChart = echarts.init(document.querySelector(".maps"));
    // JSON文件(地图数据)路径
    var loadedDataURL = '';
    let cityCode = '';
    cityCode = (cityCodeArr[1]).toString().slice(0, 4) + '00'; // 市级城市json码 4位 后面+00
    loadedDataURL = `./js/geometryCouties/${cityCode}.json`;
    // if (cityCodeArr.length == 2) { // 选择了 省市两级 只展示市
    //     cityCode = (cityCodeArr[1]).toString().slice(0, 4) + '00'; // 市级城市json码 4位 后面+00
    //     loadedDataURL = `./map/geometryCouties/${cityCode}.json`;
    // } else if (cityCodeArr.length == 1) {// 只选择省
    //     cityCode = (cityCodeArr[0]).toString().slice(0, 2); // 省json只有前两位数字
    //     loadedDataURL = `./map/geometryProvince/${cityCode}.json`;
    // } else {
    //     loadedDataURL = `./map/china.json`;
    //     cityCode = 'china';
    // }
    // 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。
    // myChart.showLoading();
    let mapName = cityCode;
    // 引入JSON文件
    $.get(loadedDataURL, function (geoJson) {

        const data = geoJson.features.map((item, index) => {
            const geoAreaName = item.properties.name; // geo文件中的地理名称
            const currentArea = allAreaData.find(item => {
                return item.name == geoAreaName
            })
            let taskNumber = index, volunteerNumber = index;
            if (currentArea) {
                taskNumber = currentArea.taskNumber;
                volunteerNumber = currentArea.volunteerNumber;
            }
            return {
                name: geoAreaName,
                value: volunteerNumber,
                taskNumber: taskNumber, // 活动总数
                volunteerNumber: volunteerNumber * 10, // 志愿者总数
                // coord: item.properties.center,
                coord: item.properties.centroid,
                selected: true
                // x: 150,
                // y: 150
            }
        })
        console.log('geoJson:', geoJson)
        // 注册地图名字(tongren)和数据(geoJson)

        echarts.registerMap(mapName, geoJson);

        // 隐藏动画加载效果。
        // myChart.hideLoading();

        // 图表配置项
        var option = { 
            // title: { // 标题
            //   top: '2%',
            //   text: '3D地图',
            //   subtext: '',
            //   x: 'center',
            //   textStyle: {
            //     color: '#ccc'
            //   }
            // },
            selectedMode: 'multiple', // 选中效果固话
            tooltip: { // 提示框
                show: true,
                trigger: 'item',
                formatter: function (params) {
                    return params.name;
                }
            },
            grid: {
                left: "0%",
                top: "-30%",
                right: "3%",
                bottom: "0%",
                containLabel: true
            },
            geo: {
                map: "china",
               // 开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                roam: true, 
                zoom: 1.1,
                 
           },
            series: [ 
                {

                    name: 'map3D',
                    type: "map3D", // map3D / map
                    zoom: 1.6,
                    map: mapName, 
                    layoutSize: 100,
                    label: { // 标签的相关设置
                        show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
                        // distance: 5, // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
                        //formatter:, // 标签内容格式器
                        textStyle: { // 标签的字体样式
                            color: '#ffffff', // 地图初始化区域字体颜色
                            fontSize: 14, // 字体大小
                            opacity: 1, // 字体透明度
                            backgroundColor: 'rgba(0,23,11,0)' // 字体背景色
                        },
                        // normal:{
                        //   show:true,
                        //   formatter:function(params){ //标签内容
                        //     // console.log(params)
                        //     return  params.name;
                        //   },
                        //   // lineHeight: 20,
                        //   backgroundColor:'rgba(255,255,255,.9)',
                        //   borderColor:'#80cffd',
                        //   borderWidth:'1',
                        //   padding:[5,15,4],
                        //   color:'#000000',
                        //   fontSize: 12,
                        //   fontWeight:'normal',
                        // },
                        emphasis: {
                            show: true,//鼠标悬入不显示地名
                            // itemStyle: {
                            //   show: "true",
                            //   borderWidth: 4,
                            //   borderColor: "#b2163c", //边框颜色
                            //   areaColor: "#531f67" //鼠标移上去的颜色
                            // },
                            // label: {
                            //   color: "#fff",
                            //   fontWeight: "bold",
                            //   show: true
                            // }
                        }
                    },
                    tooltip: { //提示框组件。
                        alwaysShowContent: true,
                        hoverAnimation: true,
                        trigger: 'item', //触发类型 散点图
                        enterable: true, //鼠标是否可进入提示框
                        transitionDuration: 1, //提示框移动动画过渡时间
                        triggerOn: 'click',
                        formatter: function (params) {
                            // console.log(params.name, 'params.name')
                            if (params.name) {
                                var str = `
                    <div class="map-tooltip">
                      <div class="city-name">${params.name}</div>
                      <div class="city-info">志愿者人数：<span class="city-num">${params.data.volunteerNumber}</span></div>
                      <div class="city-info">活动总数：<span class="city-num">${params.data.taskNumber}</span></div>
                    </div>
                    `
                                return str;
                            }
                        },
                        // backgroundColor: 'rgba(30, 54, 124,1)',
                        // backgroundColor: '#01FEDD',
                        borderWidth: '1px',
                        borderRadius: '4',
                        borderColor: '#00B2AC',
                        textStyle: {
                            color: 'rgba(255,255,255,1)'
                        },
                        padding: [5, 10]
                    },
                    itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
                        // areaColor: 'rgba(95,158,160,0.5)', // 地图板块的颜色
                        areaColor: '#4286EC', // 地图板块的颜色
                        opacity: 1, // 图形的不透明度 [ default: 1 ]
                        borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
                        borderColor: '#63D4F8' // 图形描边的颜色。[ default: #333 ]
                    },

                    data: data,
                    // 3d地图添加 markPoint 位置不对
                    /*markPoint:{
                      symbolSize: 45,
                      symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z',
                      itemStyle: {
                        normal: {
                          borderColor: '#33CBFF',
                          color:'#33CBFF',
                          borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                          label: {
                            show: true
                          }
                        }
                      },
                      data: data
                    }*/
                }],
        };

        // 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
        // 动态显示tootip /*map3D中 不生效*/
        // setTimeout(() => {
        //   console.log('dispatchAction');
        //   myChart.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,
        //     dataIndex: 1
        //   });
        // }, 3000);
    });
} 
